<template>
  <el-card
    class="form-container"
    shadow="never"
  >
    <el-form
      :model="content"
      ref="contentFrom"
      label-width="150px"
    >
      <el-form-item
        label="品类名称："
        prop="name"
        :rules="[
          { required: true, message: '请输入品类名称', trigger: 'change' }
        ]">
        <el-input
          v-model="content.name"
          placeholder="请输入"
        ></el-input>
      </el-form-item>
      <el-form-item label="关联属性：">
        <el-input
          v-model="listQuery.prptyName"
          placeholder="属性名称"
          style="width:300px"
        ></el-input>
        <el-button @click="handleSearchList()">搜索</el-button>
      </el-form-item>
      <el-form-item>
        <el-table
          v-loading="loading"
          ref="multipleTable"
          :data="tableData"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column
            type="selection"
            width="55"
          >
          </el-table-column>
          <el-table-column
            label="属性名称"
            width="120"
          >
            <template slot-scope="scope">{{ scope.row.prptyName }}</template>
          </el-table-column>
          <el-table-column
            label="类型"
            width="120"
          >
            <template slot-scope="scope">{{ prptyType[scope.row.prptyType] }}</template>
          </el-table-column>
          <el-table-column
            label="属性值"
            show-overflow-tooltip
          >
            <template slot-scope="scope">{{ scope.row.prptyValList | formatPrptyValList }}</template>
          </el-table-column>
        </el-table>
      </el-form-item>
      <el-form-item>
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          layout="total, sizes,prev, pager, next,jumper"
          :page-size="listQuery.pageSize"
          :page-sizes="[5,10,15]"
          :current-page.sync="listQuery.pageNum"
          :total="total"
        >
        </el-pagination>
      </el-form-item>
      <br>
      <el-form-item>
        <el-button
          type="primary"
          @click="onSubmit('contentFrom')"
        >确定</el-button>
        <el-button @click="back">取消</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script>
import { prptypackageSave, prptyListPrptyByPackageId } from '@/api/goodsMs'
const defaultListQuery = {
  pageNum: 1,
  pageSize: 10,
  prptyName: '',
  prptyIds: ''
}
const defaultContent = {
  id: '',
  name: '',
  prptyIds: '',
  seq: 1,
  status: 0
}
export default {
  // name: 'MenuDetail',
  props: {
    isEdit: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      prptyType: {
        1: '销售属性',
        2: '自然属性'
      },
      listQuery: Object.assign({}, defaultListQuery),
      total: null,
      source: '销售属性',
      // multipleSelection: [],
      content: Object.assign({}, defaultContent),
      tableData: [],
      pageTableData: [],
      prptyIds: [],
      loading: false
    }
  },
  mounted () {
    // this.content.name = this.$route.query.name
    // this.listQuery.prptyPackageId = this.$route.query.id
    // this.content.prptyIds = this.$route.query.prptyIds
    // this.content.id = this.$route.query.id

    this.getList()
  },
  filters: {
    formatPrptyValList (row) {
      const str = row.map((item) => {
        return item.prptyValue
      })
      return str.toString()
    }
  },
  methods: {
    handleSizeChange (val) {
      this.listQuery.pageNum = 1
      this.listQuery.pageSize = val
      this.getList()
    },
    handleCurrentChange (val) {
      this.listQuery.pageNum = val
      this.getList()
    },
    handleSearchList () {
      this.listQuery.pageNum = 1
      this.getList()
    },
    getList () {
      const curPageTableData = this.pageTableData[this.listQuery.pageNum - 1]
      if (curPageTableData) {
        this.tableData = curPageTableData
        setTimeout(() => {
          this.pageTableData[this.listQuery.pageNum - 1] = this.tableData.map(row => {
            if (row.isSelected === 'Y') {
              this.$refs.multipleTable.toggleRowSelection(row)
            }
            return row
          })
        }, 0)
      } else {
        this.loading = true
        prptyListPrptyByPackageId(this.listQuery).then(res => {
          this.loading = false
          this.tableData = res.data.list
          this.total = res.data.total
          setTimeout(() => {
            this.$refs.multipleTable.clearSelection()

            this.pageTableData[this.listQuery.pageNum - 1] = this.tableData.map(row => {
              if (row.isSelected === 'Y') {
                this.$refs.multipleTable.toggleRowSelection(row)
              }
              return row
            })
          }, 0)
        })
      }
    },
    handleSelectionChange (val) {
      setTimeout(() => {
        this.pageTableData[this.listQuery.pageNum - 1] = this.tableData.map((items) => {
          items.isSelected = 'N'
          val.map((item) => {
            if (items.id === item.id) {
              items.isSelected = 'Y'
            }
          })
          return items
        })
      }, 0)
    },
    onSubmit () {
      this.prptyIds = []
      this.pageTableData.map((tabData) => {
        tabData.map((item) => {
          if (item.isSelected === 'Y') {
            this.prptyIds.push(item.id)
          }
        })
      })
      if (this.prptyIds.length > 10) {
        return this.$message({
          message: '最多不能超过10条',
          type: 'error',
          duration: 1000
        })
      }
      // this.content.prptyIds = [...new Set(this.content.prptyIds.split(';').concat(this.prptyIds))].toString().replace(/,/g, ';')
      this.content.prptyIds = this.prptyIds.toString().replace(/,/g, ';')
      this.$refs['contentFrom'].validate((valid) => {
        if (valid) {
          this.$confirm('是否提交数据', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            prptypackageSave(this.content).then((res) => {
              this.$message({
                message: '提交成功',
                type: 'success',
                duration: 1000
              })
              this.$router.back()
            })
          })
        } else {
          this.$message({
            message: '验证失败',
            type: 'error',
            duration: 1000
          })
          return false
        }
      })
    },
    back () {
      this.$router.go(-1)
    }
  }
}
</script>

<style scoped>
  .form-container {
    position: relative;
    z-index: 0;
    width: 800px;
  }
  .cardValue {
  }
  .button-del {
    margin-top: 68px;
  }
</style>
